<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>
<script id="ColorVertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    uniform float u_PointSize;

    void main(){
        gl_Position = a_Position;
        gl_PointSize = u_PointSize;
    }
</script>
<script id="ColorFragmentShader" type="x-shader/x-fragment">
    precision mediump float;

    uniform vec4 u_Color;
    uniform float u_Set;
    uniform vec3 u_Data;

    void main(){

        float startLess = u_Data.x;
        float endLess = u_Data.y;
        float broder = u_Data.z;
        float sRand = endLess - startLess;

        float dist = distance(gl_PointCoord, vec2(0.5,0.5));
        vec4 color = u_Color;
        
        if(dist < u_Set && dist > u_Set - broder){
            if(u_Set > startLess){
                color.a = (1.0 - (u_Set - startLess) / sRand) * 1.0;
            }    
            gl_FragColor = color;
        }
    }
</script>
<script type="module">
    import { Matrix4, Vector3, Color, OrthographicCamera, PerspectiveCamera, Spherical } from '../js/three.module.js';
    import { CreateProgram, imgPromise } from '../js/Utils.js';
    import lib from '../js/ThreeLib.js';
    import CameraController from '../js/CameraController.js'
    import Poly from '../js/Poly4.js'

    import Geo from '../js/Poly2/Geo.js'
    import Mat from '../js/Poly2/Mat.js'
    import Obj3D from '../js/Poly2/Obj3D.js'
    import Scene from '../js/Poly2/Scene.js'



    //#region gl
    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - 4;

    const gl = canvas.getContext("webgl", { antialias: true, });

    // gl.enable(gl.DEPTH_TEST);//开始背景遮挡会频闪
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);//去图片描边
    //#endregion



    const scene = new Scene({ gl: gl });
    scene.regProgram('color', {
        program: CreateProgram(gl,
            document.querySelector('#ColorVertexShader').innerText,
            document.querySelector('#ColorFragmentShader').innerText),
        attribs: [
            'a_Position',
        ],
        uniforms: [
            'u_PointSize', 'u_Color', 'u_Set', 'u_Data',
        ]
    })


    const dataMap = new Map();

    let publiclyIndex = 0;

    //默认的值
    const data = {
        StartLess: 0.0,
        EndLess: 0.5,
        Broder: 0.003,


        S: 0.2,

        u_Color: [1, 1, 1, 1],
        u_Set: 0.0,
        u_PointSize: 100,
    };

    //main





    canvas.addEventListener('pointerdown', function (event) {
        const { clientX, clientY } = event;

        const [x, y] = getViewPosi(clientX, clientY);

        let data = createData();
        create(x, y, data)
    })

    function create(x, y, data) {
        const { u_Color, u_Set, u_PointSize,
            StartLess, EndLess, Broder,
            index, S } = data;
        let backgroundFace = new Obj3D({
            geo: new Geo({
                data: {
                    'a_Position': { size: 3, array: new Float32Array([x, y, 0]) },
                },
            }),
            mat: new Mat({
                program: 'color',
                mode: ['POINTS'],
                data: {
                    'u_PointSize': { type: 'uniform1f', value: u_PointSize },
                    'u_Color': { type: 'uniform4fv', value: u_Color },
                    'u_Set': { type: 'uniform1f', value: u_Set },
                    'u_Data': { type: 'uniform3fv', value: [StartLess, EndLess, Broder] },
                },
            }),
        });
        console.log(data)
        scene.add(backgroundFace);
        dataMap.set(index, {
            index: index,
            S: S,
            u_Set: u_Set,
            EndLess: EndLess,
            element: backgroundFace,
        });
    }

    function createData() {
        let curData = {};
        Object.assign(curData, data);
        curData.index = publiclyIndex++;
        return curData;
    }

    function getViewPosi(x, y) {
        const [hx, hy] = [canvas.width / 2, canvas.height / 2];
        const [cx, cy] = [
            (x - hx) / hx,
            -(y - hy) / hy,
        ];
        return [cx, cy];
    }



    (function ani(time) {

        let indexArr = [];
        for (let [key, value] of dataMap) {
            const { index, u_Set, S, EndLess, element } = value;

            if (u_Set > 100 * EndLess) {
                indexArr.push(index);
            } else {
                value.u_Set += S;
                element.setUniform('u_Set', { value: value.u_Set * 0.01 });
            }
        }

        for (let i = 0; i < indexArr.length; i++) {
            dataMap.delete(indexArr[i]);
        }

        draw();

        requestAnimationFrame(ani);
    })(0);


    function draw() {
        scene.draw();
    }
</script>

</html>